<template>
	<view class="dialog-wrapper" v-if="visible">
		<view class="dialog">
			<view class="dialog-head">
				<view class="dialog-title">添加售卖/赠送信息</view>
				<image class="dialog-header_btn" src="@/static/approval/deletes.png" @click="closeDialog" />
			</view>
			<view class="dialog-main">
				<view class="c-row-box">
					<view class="c-row-item">
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									选择类型
								</view>
								<view class="col-text">
									<picker mode="selector" :range="presentTypeList" range-key="title" @change="addTypeChange" :disabled="isEdit">
										<view>{{ otherPriceItem.title == '' ? '请选择' : otherPriceItem.title }}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="c-row c-row-list other-input" v-if="otherPriceItem.type == 'other'">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									其他类型
								</view>
								<view class="col-text"><input type="text" v-model="otherPriceItem.other_value" placeholder="请录入" /></view>
							</view>
						</view>
						<view class="c-row c-row-list" v-if="['sugar', 'wine', 'dessert', 'led', 'light', '3d', 'rite'].includes(otherPriceItem.type)">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									选择{{ otherPriceItem.title }}
								</view>
								<view class="col-text">
									<picker
										mode="selector"
										:range="dictionary.getPickerByTag(otherPriceItem.type)"
										:data-type="otherPriceItem.type"
										range-key="title"
										@change="changeAddonsCategory"
										:disabled="isEdit"
									>
										<view>{{ dictionary.getTitleByTag(otherPriceItem.type, otherPriceItem.tag_id, '请选择') }}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									成本划分
								</view>
								<view class="col-text">
									<radio-group @change="changeCostMaster">
										<label class="radio-box" v-for="(ele, k) in costMasterList" :key="k">
											<radio class="radio-input" :value="ele.id + ''" :checked="ele.id == otherPriceItem.cost_master" />
											{{ ele.title }}
										</label>
									</radio-group>
								</view>
							</view>
						</view>

						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									增项数量
								</view>
								<view class="col-text"><input type="digit" :disabled="isEdit" v-model="otherPriceItem.amount" placeholder="请输入" @input="addPriceChange" /></view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									增项价格
								</view>
								<view class="col-text"><input type="digit" :disabled="isEdit" v-model="otherPriceItem.price" placeholder="请输入" @input="addPriceChange" /></view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									增项小计
								</view>
								<view class="col-text">
									<view>{{ otherPriceItem.total }}</view>
								</view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">备注</view>
								<view class="col-text"><input type="text" :disabled="isEdit" v-model="otherPriceItem.remark" placeholder="请输入" /></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dialog-footer">
				<button class="c-button c-button-small c-button-primary" @click="confirmAppend" v-if="!isEdit">添加</button>
				<button class="c-button c-button-small c-button-primary" @click="closeDialog" v-if="isEdit">确定</button>
				<button class="c-button c-button-small" @click="closeDialog">取消</button>
			</view>
		</view>
		
		<append-car ref="appendCarDialog"></append-car>
	</view>
</template>

<script>
import dictionary from '@/utils/dictionary.js';
import appendCar from '../car/append.vue'
	
const otherItem = {
	id: '',
	ritual_title: '',
	ritual_id: 0,
	tag_id: 0,
	tag_title: '',
	other_value: '',
	cost_master: 1,
	title: '',
	type: '',
	amount: 0,
	price: 0,
	total: 0,
	remark: ''
};

export default {
	props: {
		parent: {}
	},
	components: {
		appendCar
	},
	data() {
		return {
			visible: false,
			presentTypeList: [
				{
					id: 1,
					type: 'sugar',
					title: '喜糖'
				},
				{
					id: 2,
					type: 'wine',
					title: '酒水'
				},
				{
					id: 3,
					type: 'dessert',
					title: '点心'
				},
				{
					id: 4,
					type: 'led',
					title: 'LED'
				},
				{
					id: 5,
					type: 'light',
					title: '灯光'
				},
				{
					id: 6,
					type: '3d',
					title: '3D'
				},
				{
					id: 7,
					type: 'into',
					title: '进场费'
				},
				{
					id: 8,
					type: 'rite',
					title: '仪式'
				},
				{
					id: 9,
					type: 'room',
					title: '婚房'
				},
				{
					id: 10,
					type: 'part',
					title: '停车位'
				},
				{
					id: 11,
					type: 'other',
					title: '其他'
				},
				{
					id: 12,
					type: 'car',
					title: '婚车'
				}
			],
			otherPriceItem: Object.assign({}, otherItem),
			costMasterList: [
				{
					id: 1,
					title: '无'
				},
				{
					id: 2,
					title: '公司'
				},
				{
					id: 3,
					title: '酒店'
				}
			],
			isEdit: false
		};
	},
	beforeMount() {
		this.dictionary = dictionary;
	},
	methods: {
		// 显示当前dialog,isEdit=添加|查看
		showDialog(isEdit, item) {
			this.visible = true;
			this.isEdit = isEdit;
			if (isEdit) {
				this.otherPriceItem = Object.assign({}, item)
			}
		},
		// 添加类型变化。选的婚车的情况，要显示婚车的dialog
		addTypeChange(e) {
			let that = this;
			let index = e.target.value;
			let last = this.presentTypeList.length - 1;
			if (index != last) {
				// 非婚车增项
				this.otherPriceItem.title = this.presentTypeList[index].title;
				this.otherPriceItem.id = this.presentTypeList[index].id;
				this.otherPriceItem.type = this.presentTypeList[index].type;
				this.otherPriceItem.tag_id = 0;
				
			} else {
				// 赠送婚车
				uni.showModal({
					title: '提示',
					content: '确认添加婚车?',
					success: function(res) {
						if (res.confirm) {
							that.$refs['appendCarDialog'].showDialog();
							that.parent.hasCarPresent = true;
						} else if (res.cancel) {
							that.parent.hasCarPresent = false;
						}
					}
				});
			}
		},
		// 切换所选类型下面的具体商品
		changeAddonsCategory(e) {
			let index = e.target.value;
			let tag = e.target.dataset.type;
			let pickList = dictionary.getPickerByTag(tag);
			this.otherPriceItem.tag_id = pickList[index]['id'];
			let tagTitle = dictionary.getTitle(pickList, this.otherPriceItem.tag_id);
			this.otherPriceItem.tag_title = tagTitle;
			this.$forceUpdate();
		},
		// 切换成分划分，公司承担或者酒店成单
		changeCostMaster(e) {
			this.otherPriceItem.cost_master = e.detail.value;
		},
		// 其他奋勇
		addPriceChange() {
			this.otherPriceItem.total = (
				parseFloat(this.otherPriceItem.amount == '' ? 0 : this.otherPriceItem.amount) * parseFloat(this.otherPriceItem.price == '' ? 0 : this.otherPriceItem.price)
			).toFixed(2);
		},
		// 确认添加/编辑
		confirmAppend() {
			if (this.otherPriceItem.title == '' || this.otherPriceItem.amount == 0) {
				uni.showToast({
					icon: 'none',
					title: '请填写完整'
				});
				return false;
			}

			console.log(this.parent);
			let parent = this.parent;
			parent.addons.push(this.otherPriceItem);
			parent.getOtherPrice(parent.addons);
			this.closeDialog();
		},
		// 关闭弹框
		closeDialog() {
			this.visible = false;
			this.isEdit = false;
			this.otherPriceItem = Object.assign({}, otherItem);
		}
	}
};
</script>
<style lang="less">
@import url('../../components/common.less');
@import url('../common/common.less');
</style>
